import React, { PureComponent } from 'react';

class MsgImage extends PureComponent {

  render() {
    const { imageSrc } = this.props;
    if (imageSrc == undefined || imageSrc==""){
      return (
        <div >

        </div>
      );
    }
     const imgArr = imageSrc.replace("[","").replace("]","").replace(/"/g,"").split(",");
    const imagArrLength = imgArr.length;
    if(imagArrLength == 0){
      return (
        <div >

        </div>
      );
    }else if(imagArrLength == 1){
      return (
        <div >
          <img src={imgArr[0]} style={{width:60,height:60,marginLeft:5,cursor:"pointer" }}  onClick={() => this.props.handleImagePlay(imgArr[0]) } />
        </div>
      );
    }else if(imagArrLength == 2){
      return (
        <div >
          <img src={imgArr[0]} style={{width:60,height:60,marginLeft:5,cursor:"pointer" }}  onClick={() => this.props.handleImagePlay(imgArr[0]) } />
          <img src={imgArr[1]} style={{width:60,height:60,marginLeft:5,cursor:"pointer" }}  onClick={() => this.props.handleImagePlay(imgArr[1]) } />
        </div>
      );
    }else if(imagArrLength == 3){
      return (
        <div >
          <img src={imgArr[0]} style={{width:60,height:60,marginLeft:5,cursor:"pointer" }}  onClick={() => this.props.handleImagePlay(imgArr[0]) } />
          <img src={imgArr[1]} style={{width:60,height:60,marginLeft:5,cursor:"pointer" }}  onClick={() => this.props.handleImagePlay(imgArr[1]) } />
          <img src={imgArr[2]} style={{width:60,height:60,marginLeft:5,cursor:"pointer" }}  onClick={() => this.props.handleImagePlay(imgArr[2]) } />
        </div>
      );
    }else if(imagArrLength == 4){
      return (
        <div >
          <img src={imgArr[0]} style={{width:60,height:60,marginLeft:5,cursor:"pointer" }}  onClick={() => this.props.handleImagePlay(imgArr[0]) } />
          <img src={imgArr[1]} style={{width:60,height:60,marginLeft:5,cursor:"pointer" }}  onClick={() => this.props.handleImagePlay(imgArr[1]) } />
          <img src={imgArr[2]} style={{width:60,height:60,marginLeft:5,cursor:"pointer" }}  onClick={() => this.props.handleImagePlay(imgArr[2]) } />
          <img src={imgArr[3]} style={{width:60,height:60,marginLeft:5,cursor:"pointer" }}  onClick={() => this.props.handleImagePlay(imgArr[3]) } />
        </div>
      );
    }else if(imagArrLength == 5){
      return (
        <div >
          <div >
            <img src={imgArr[0]} style={{width:60,height:60,marginLeft:5,cursor:"pointer" }}  onClick={() => this.props.handleImagePlay(imgArr[0]) } />
            <img src={imgArr[1]} style={{width:60,height:60,marginLeft:5,cursor:"pointer" }}  onClick={() => this.props.handleImagePlay(imgArr[1]) } />
            <img src={imgArr[2]} style={{width:60,height:60,marginLeft:5,cursor:"pointer" }}  onClick={() => this.props.handleImagePlay(imgArr[2]) } />
          </div>
          <div >
            <img src={imgArr[3]} style={{width:60,height:60,marginLeft:5,cursor:"pointer" }}  onClick={() => this.props.handleImagePlay(imgArr[3]) } />
            <img src={imgArr[4]} style={{width:60,height:60,marginLeft:5,cursor:"pointer" }}  onClick={() => this.props.handleImagePlay(imgArr[4]) } />
          </div>
        </div>
      );
    }else if(imagArrLength == 6){
      return (
        <div >
          <div >
            <img src={imgArr[0]} style={{width:60,height:60,marginLeft:5,cursor:"pointer" }}  onClick={() => this.props.handleImagePlay(imgArr[0]) } />
            <img src={imgArr[1]} style={{width:60,height:60,marginLeft:5,cursor:"pointer" }}  onClick={() => this.props.handleImagePlay(imgArr[1]) } />
            <img src={imgArr[2]} style={{width:60,height:60,marginLeft:5,cursor:"pointer" }}  onClick={() => this.props.handleImagePlay(imgArr[2]) } />
          </div>
          <div >
            <img src={imgArr[3]} style={{width:60,height:60,marginLeft:5,cursor:"pointer" }}  onClick={() => this.props.handleImagePlay(imgArr[3]) } />
            <img src={imgArr[4]} style={{width:60,height:60,marginLeft:5,cursor:"pointer" }}  onClick={() => this.props.handleImagePlay(imgArr[4]) } />
            <img src={imgArr[5]} style={{width:60,height:60,marginLeft:5,cursor:"pointer" }}  onClick={() => this.props.handleImagePlay(imgArr[5]) } />
          </div>
        </div>
      );
    }else if(imagArrLength == 7){
      return (
        <div >
          <div >
            <img src={imgArr[0]} style={{width:60,height:60,marginLeft:5,cursor:"pointer" }}  onClick={() => this.props.handleImagePlay(imgArr[0]) } />
            <img src={imgArr[1]} style={{width:60,height:60,marginLeft:5,cursor:"pointer" }}  onClick={() => this.props.handleImagePlay(imgArr[1]) } />
            <img src={imgArr[2]} style={{width:60,height:60,marginLeft:5,cursor:"pointer" }}  onClick={() => this.props.handleImagePlay(imgArr[2]) } />
          </div>
          <div >
            <img src={imgArr[3]} style={{width:60,height:60,marginLeft:5,cursor:"pointer" }}  onClick={() => this.props.handleImagePlay(imgArr[3]) } />
            <img src={imgArr[4]} style={{width:60,height:60,marginLeft:5,cursor:"pointer" }}  onClick={() => this.props.handleImagePlay(imgArr[4]) } />
            <img src={imgArr[5]} style={{width:60,height:60,marginLeft:5,cursor:"pointer" }}  onClick={() => this.props.handleImagePlay(imgArr[5]) } />
          </div>
          <div >
            <img src={imgArr[6]} style={{width:60,height:60,marginLeft:5,cursor:"pointer" }}  onClick={() => this.props.handleImagePlay(imgArr[6]) } />
          </div>
        </div>
      );
    }else if(imagArrLength == 8){
      return (
        <div >
          <div >
            <img src={imgArr[0]} style={{width:60,height:60,marginLeft:5,cursor:"pointer" }}  onClick={() => this.props.handleImagePlay(imgArr[0]) } />
            <img src={imgArr[1]} style={{width:60,height:60,marginLeft:5,cursor:"pointer" }}  onClick={() => this.props.handleImagePlay(imgArr[1]) } />
            <img src={imgArr[2]} style={{width:60,height:60,marginLeft:5,cursor:"pointer" }}  onClick={() => this.props.handleImagePlay(imgArr[2]) } />
            <img src={imgArr[3]} style={{width:60,height:60,marginLeft:5,cursor:"pointer" }}  onClick={() => this.props.handleImagePlay(imgArr[3]) } />
          </div>
          <div >
            <img src={imgArr[4]} style={{width:60,height:60,marginLeft:5,cursor:"pointer" }}  onClick={() => this.props.handleImagePlay(imgArr[4]) } />
            <img src={imgArr[5]} style={{width:60,height:60,marginLeft:5,cursor:"pointer" }}  onClick={() => this.props.handleImagePlay(imgArr[5]) } />
            <img src={imgArr[6]} style={{width:60,height:60,marginLeft:5,cursor:"pointer" }}  onClick={() => this.props.handleImagePlay(imgArr[6]) } />
            <img src={imgArr[7]} style={{width:60,height:60,marginLeft:5,cursor:"pointer" }}  onClick={() => this.props.handleImagePlay(imgArr[7]) } />
          </div>
        </div>
      );
    }else if(imagArrLength == 9){
      return (
        <div >
          <div >
            <img src={imgArr[0]} style={{width:60,height:60,marginLeft:5,cursor:"pointer" }}  onClick={() => this.props.handleImagePlay(imgArr[0]) } />
            <img src={imgArr[1]} style={{width:60,height:60,marginLeft:5,cursor:"pointer" }}  onClick={() => this.props.handleImagePlay(imgArr[1]) } />
            <img src={imgArr[2]} style={{width:60,height:60,marginLeft:5,cursor:"pointer" }}  onClick={() => this.props.handleImagePlay(imgArr[2]) } />
          </div>
          <div >
            <img src={imgArr[3]} style={{width:60,height:60,marginLeft:5,cursor:"pointer" }}  onClick={() => this.props.handleImagePlay(imgArr[3]) } />
            <img src={imgArr[4]} style={{width:60,height:60,marginLeft:5,cursor:"pointer" }}  onClick={() => this.props.handleImagePlay(imgArr[4]) } />
            <img src={imgArr[5]} style={{width:60,height:60,marginLeft:5,cursor:"pointer" }}  onClick={() => this.props.handleImagePlay(imgArr[5]) } />
          </div>
          <div >
            <img src={imgArr[6]} style={{width:60,height:60,marginLeft:5,cursor:"pointer" }}  onClick={() => this.props.handleImagePlay(imgArr[6]) } />
            <img src={imgArr[7]} style={{width:60,height:60,marginLeft:5,cursor:"pointer" }}  onClick={() => this.props.handleImagePlay(imgArr[7]) } />
            <img src={imgArr[8]} style={{width:60,height:60,marginLeft:5,cursor:"pointer" }}  onClick={() => this.props.handleImagePlay(imgArr[8]) } />
          </div>
        </div>
      );
    }
  }
}

export default MsgImage;
